关于建blog过程和踩过的坑

关于建blog过程和踩过的坑

写在前面：一个电脑新手，这是我第一次写博客，参考的教程来自15级的一个学长，基本就是根据他建立的过程来操作的

主要步骤：

  • 注册github账户，新开一个repository，设置git page
    也可以租一个VPS，但是免费的git page托管服务多好用啊

  • 下载安装hexo，跟着教程来操作就OK了

  • 可以再hexo设置自己喜欢的主题和插件

  • 最后托管到github上面

    其实用这个的另一个原因是我想学一学markdown，之前有看过这个，感觉用起来还不错，语法也和html基本上差不多关键是jupyter notebook也支持(。・∀・)ノ

嘿嘿(～﹃～)~zZ，先写这么多，踩过的坑有点多，一时间写不完。

遇到的坑（或者比较难的地方吧）：

注意，下面所有带[]的表示里面的内容需要根据自己的进行替换

绑定github账户

这部分其实还好，也就是git的使用，baidu教程一大堆，常用的也就那几个

1
2
3
4
5
6
7
8
9
10
11
git init  #初始化本地git仓库
git add filename #添加文件到缓冲区
git commit -m "提交的说明" #提交文件更新
git status  #查看git库的状态
git remote add origin [远端仓库地址] #这样就增加了远程仓库
git push origin master #push到origin仓库的master分支
git push [仓库地址] master #push到仓库master分支
git pull # 拉取远端仓库到本地，如果push有问题，就要先pull，解决冲突，然后再push
git config --global user.name "[你的名字]" #这里用来作为github收到的提交的用户名
git config --global user.name "[你的邮箱]" #和上面作用相同
ssh-keygen  #生成公钥和私钥，用来连接github

购买域名（VPS）

  • 我是在Gandi上面买的，价格便宜且新人有优惠。因为大天朝还需要备案，总感觉不太方便，所以就在国外买了，Godaddy也不错听说也不错，但是我注册一直不成功，就换成这个了，目前买的是每年7RMB。
  • Gandi还可以添加网页转址，所以直接将网页转向github的二级域名username.github.io也能用，但是那就没有买域名的意义了。
  • 然后就是添加DNS，Gandi提供免费的DNS，但是国外的毕竟速度不如国内，所以用国内的DNSPod，要在Gandi那里改DNS服务器，在DNSPod加上要解析的域名地址，在控制台加上@ A [git pages的IP地址]、WWW CNAME [你的域名]记录。
  • 最后在本地新建一个CNAME文件，文件内容是你的域名，放到source文件夹下，因为hexo每次clean会将非generate生成的文件清除，而放到source文件夹下不会被清除。

_config.yml的配置
我觉得最难的一步是URL和ROOT的设置，经常出错。

  • 一开始我的域名是[username].github.io/[sample]。那么URL要设置成[username].github.io/[sample]，而ROOT要设置成/[sample]/（注意’/'号）
  • 后来我的域名换成了umzhaa.website，那么URL就要设置成umzhaa.website，ROOT设置成/

看板娘

hexo是有自带的看板娘插件的

npm install --save hexo-helper-live2d

安装的插件后修改_config.yml，在里面添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true # 开启live2d
  # enable: false
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-wanko # npm-module package name
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url

live2d支持使用自定义模型，方式如下：

  • 使用自己下载的模型

    1. 方式一（推荐使用）：

      • 在您博客根目录下创建一个live2d_models文件夹
      • 在此文件夹内新建一个子文件夹
      • 将你的 Live2D 模型复制到这个子文件夹中，自有模型应当有一个.model.json文件 (例如mymiku.model.json)
      • 将子文件夹的名称输入_config.yml 的model.use中

    2. 方式二：您可直接输入相对于博客根目录的自定义路径到model.use中,示例: ./wives/wanko

  • 使用 npm 下载的模型

    1. 方式一：下载现有的 npm 资源。官方提供了多款精美的模型，模型预览。你需要先使用npm install [模型的包名]来安装，然后将包名输入位于_config.yml的 model.use中

    2. 方式二：

      • 发布自己的模型包
      • 新建一个目录, 用 Node 环境执行 npm init，我们推荐您使用live2d-widget-model-xxx的包名
      • 再使用方式一来使用自己的模型

先写这么多吧，以后如果有什么要补充的再更新吧，如果没有的话可能就要开新坑了

2019年12月21日

显示公式

使用mathjax引擎

首先切换渲染引擎：

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

然后更改配置文件/node_modules/hexo-renderer-kramed/lib/renderer.js

1
2
3
4
function formatText(text) {
    // Fit kramed's rule: $$ + \1 + $$
    return text.replace(/`\$(.*?)\$`/g, '$$$$$1$$$$');
}

修改为

1
2
3
4
// Change inline math rule
function formatText(text) {
    return text;
}

停止使用hexo-math，安装mathjax包。

1
npm uninstall hexo-math --save

安装hexo-renderer-mathjax包

1
npm install hexo-renderer-mathjax --save

更新mathjax配置文件

打开/node_modules/hexo-renderer-mathjax/mathjax.html
更改为：

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>

因为LaTeX与markdown语法有语义冲突，所以 hexo 默认的转义规则会将一些字符进行转义，所以我们需要对默认的规则进行修改.

打开/node_modules\kramed\lib\rules\inline.js
1、

1
escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,

更改为

1
escape: /^\\([`*\[\]()# +\-.!_>])/,

2、

1
em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

更改为

1
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

开启mathjax

打开/themes/yilia主题目录下的config.yml文件
因为我用的yilia主题，所以路径是/themes/yilia

我们需要在config.yml文件 中开启 Mathjax， 找到 mathjax 字段添加如下代码：(不同的主题配置方法略微有区别)

1
2
mathjax:
    enable: true

或者

1
mathjax: true

写博客文件时要添加mathjax内容。

1
2
3
4
title: 特征提取——局部特征
date: 2018-07-16 09:39:40
tags: [GitHub, Mysql]
mathjax: true

来源于简书：https://www.jianshu.com/p/68e6f82d88b7

作者：AomanHao

使用KaTeX引擎

KaTeX引擎相比mathjax更轻量快速，功能略少但够用，可以安装插件可以复制网页中的LaTeX源码。

安装很简单，将官方提供的css和js文件注入到网页中即可：

1
2
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.3/dist/katex.min.css" integrity="sha384-Juol1FqnotbkyZUT5Z7gUPjQ9gzlwCENvUZTpQBAPxtusdwFLRy382PSDx5UUJ4/" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.3/dist/katex.min.js" integrity="sha384-97gW6UIJxnlKemYavrqDHSX3SiygeOwIZhwyOKRfSaf0JWKRVj9hLASHgFTzT+0O" crossorigin="anonymous"></script>

对于提供头文件注入功能的主题，可以直接在配置文件中修改注入代码：

1
2
3
4
inject:
  head:
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.css" integrity="sha384-1IGr2Yb8xuHjwTG+WoGjj2+I/a/N6z0gDD5YIGCQxywPROOKc3+orbn/R7arWQxD" crossorigin="anonymous">
    - <script src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.js" integrity="sha384-I2b1Pcl48X93GxEkGkaMo1hrd6n+IX8H2wgSsMimGbkZoGTve/87h1FjaDNvlpQi" crossorigin="anonymous"></script>

对于没有提供注入功能的主题，可手动将注入代码加入到源码中，例如landscape主题，路径为themes/layout/_partial/head.ejs，其他主题路径类似，如下所示：

1
2
3
4
···
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.3/dist/katex.min.css" integrity="sha384-Juol1FqnotbkyZUT5Z7gUPjQ9gzlwCENvUZTpQBAPxtusdwFLRy382PSDx5UUJ4/" crossorigin="anonymous">
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.3/dist/katex.min.js" integrity="sha384-97gW6UIJxnlKemYavrqDHSX3SiygeOwIZhwyOKRfSaf0JWKRVj9hLASHgFTzT+0O" crossorigin="anonymous"></script>
</head>

插入图片和相对路径

插入图片方式有绝对引用、网络资源和相对引用

绝对引用

将图片放在source/images 文件夹中，然后在markdown中引用，编译后图片在public/images 文件夹下

1
![](/images/img.png)

网络资源

将图片上传到图床，直接引用url链接，比较推荐，但是就怕服务商跑路。

几个图床网站：

路过图床免费，无限空间

ImgURL免费图床

SM.MS免费，每次最多上传10张照片，一张照片最大5M，可删除

聚合图床多个备份，不怕被删除

相对引用

需要将图片一起上传，首先开启_config.yml文件中的post_asset_folder选项

1
post_asset_folder: true

此时在public/_post/文件夹下建立一个和文章同名的文件夹，在里面放上图片，引用时有两种方式

1
2
![](文章名/img.png)
![](img.png)

第一钟方法为markdown标准写法，在markdown中可以正常预览，但在网络上不能正常显示，查看图片链接如下，多了一个“文章名”。

1
<img src="hxq2291895932.github.io/2021/10/13/文章名/文章名/img.png">

为了解决这个问题，可以使用hexo-asset-image插件，但我没研究明白咋用。

第二种方法是hexo推荐的写法，但markdown显示不出来，因为文章同一文件夹下没有img.png这个文件；但网络上能够正常显示，查看链接会发现为：

1
<img src="hxq2291895932.github.io/2021/10/13文章名/img.png"

这才是正确的图片地址，为了解决markdown显示不出来的问题，在typora编辑器最上方yml-front-matter一栏中加入如下代码：

1
2
3
---
typora-root-url: 文章名称
---